// $(function (){
//     loadStudentList();
// });
// function loadStudentList(){
//     $.ajax({
//         url: "/api/student/list"
//     }).done(function(data) {
//         // console.log(data)
//         let html="";
//         data.forEach((element, index) => {
//             html+="<tr>"
//             html+="<td>"+element.id+"</td>"
//             html+="<td>"+element.name+"</td>"
//             html+="<td>"+element.gender+"</td>"
//             html+="<td>"+element.subject+"</td>"
//             html+="<td>"+element.hire_date+"</td>"
//             html+="<td><a href='#' onclick='showStudenDlg("+element.id
//                 +")'>编辑</a>&nbsp;&nbsp;<a href='#' onclick='deleteById("+
//                 +element.id+") '>删除</a></td>"
//             html+="</tr>"
//         })
//         $("#studentTb").html(html)
//     });
// // }


let layerIndex;
/**
 * 弹出学生新增/更改对话框
 */
function showStudenDlg(id){
    let title = "新增学生";
    if(id){
        // 编辑
        title = "编辑学生";
        $("#formId").css("display","block");
        // 读取学生信息，并赋值
        $.ajax({
            url: "/api/student/" + id,
            method: "GET"
        }).done(result => {
            console.log(result);
            // 遍历 result 对象并将值填充到 #studForm 表单中
            $.each(result, function(key, value){
                var field = $('#studForm [name="' + key + '"]');
                if (field.is('radio')) {
                    field.filter('[value="' + value + '"]').prop('checked', true); // 选中对应的单选按钮
                } else if (field.is(':checkbox')) {
                    field.prop('checked', value === "yes"); // 选中复选框
                } else {
                    field.val(value); // 填充文本框或其他字段
                }
            });
        });
    } else {
        // 新增
        $("#studForm")[0].reset(); // 清空表单
        $("#formId").css("display", "none");
    }

    layerIndex = layer.open({
        type: 1,
        title: title,
        area: ['520px', 'auto'],
        content: $('#studForm') // 捕获层
    });
}

function getSearchCondtion() {
    let formData = {};
    // 遍历每个输入元素，将其值存储到 formData 对象中
    $('#queryForm').find('input, select').each(function() {
        let name = $(this).attr('name'); // 获取元素的 name 属性
        let value = $(this).val(); // 获取元素的值
        // 只有 name 属性存在且值不为空才会添加到 formData 中
        if (name && value) {
            formData[name] = value;
        }
    });
    return formData;
}



let use = layui.use(function(){
    // （1）验证表单是否合法
    layui.form.on('submit(stud-dlg)', function(event) {
        event.preventDefault(); // 阻止表单默认提交
        commitStuDlg();
    });

    // （2）表格初始化
    const table = layui.table;
    let student = getSearchCondtion();
    // var student = {name: '张三', age: 22 }; // 示例数据

    // 创建渲染实例
    table.render({
        elem: '#tbStudent',
        url: '/api/student/getbypage', // 此处为静态模拟数据，实际使用时需换成真实接口
        method: "POST",
        contentType: 'application/json', // 确保以 JSON 格式发送
        where: {"data": student},
        page: true,
        cols: [[
            { type: 'checkbox', fixed: 'left' },
            { field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true },
            { field: 'name', title: '姓名' },
            {
                field: 'sno',
                title: '学号',
                width: 150,
            },
            {
                field: 'sex',
                width: 80,
                title: '性别',
                sort: true,
                templet: d => d.sex === '男' ? '男' : (d.sex === '女' ? '女' : '未知')
            },
            {
                field: 'subject',
                width: 100,
                title: '学科',
                sort: true
            },
            {
                fixed: "right",
                title: "操作",
                width: 134,
                minWidth: 125,
                templet: '#editTemplate' // 假设你的编辑模板ID是 #editTemplate
            }
        ]],
        done: function(rs) {
            // console.log(rs);
        }
    });

    //触发单元格工具事件
    table.on('tool(tbStudent)',function(obj){
        var data = obj.data;//获得当前行数据
        // console.Log(obj)
        if(obj.event === 'edit'){
            layer.open({
            title:'编辑 - id：'+data.id,
            type: 1,
            агеa: ['80%' , '80%'],
            content:'<div style="padding:16px;">自定义表单元素</div>'
        });
    }
});




});

function search() {
    let student = getSearchCondtion();  // 获取查询条件
    const table = layui.table;

    // 重新加载表格数据
    table.reload("tbStudent", {
        where: { data: student }  // 设置查询条件
    });

    console.log("where condition: " + JSON.stringify(student));  // 打印查询条件
}

function deleteConfirm(){
    const table=layui.table;
    const checkStatus=table.checkStatus('tbStudent');
    console.log(checkStatus)
}
function commitStuDlg() {
    let id = $("#id").val();
    let formData = $("#studForm").serialize(); // 表单数据
    let url = id ? "/api/student/update" : "/api/student/add"; // 判断是新增还是更新
    let method = id ? "PUT" : "POST"; // 判断请求方法

    // 禁用按钮，避免重复提交
    $("#btnOK").prop("disabled", true).addClass("layui-btn-disabled");

    $.ajax({
        url: url,
        method: method,
        data: formData
    }).done(result => {
        console.log(result);
        if (result.id) {
            // （4）读取并刷新原来的读学生列表
            loadStudentList();
            // （3）关闭弹出层
            console.log(id ? "Update success!" : "Add success!");
            if (layerIndex) layer.close(layerIndex);
        }
    }).fail((jqXHR, textStatus, errorThrown) => {
        console.error("Request failed:" + textStatus + "-" + errorThrown);
        // 可以在这里处理错误逻辑
        alert("An error occurred. Please try again.");
    }).always(() => {
        // 成功或失败后恢复按钮状态
        $("#btnOK").prop("disabled", false).removeClass("layui-btn-disabled");
    });
}

function deleteById(id) {
    // 删除
    layer.confirm('确认删除吗？', {icon: 3}, function() {
        $.ajax({
            url: "/api/student/delete/" + id,
            method: "DELETE"
        }).done(result => {
            loadStudentList();
        });
        layer.closeAll(); // 关闭所有层，包括弹出框
    });
}